<template>
  <h1>插槽</h1>
  <h2>默认插槽</h2>
  <div>
    <child1>提交</child1>
    <child1></child1>
  </div>

  <h2>具名插槽</h2>
  <child2>
    <template #header>
        <div>header</div>
    </template>

    <template>
        <div>main</div>
    </template>
    <div>default</div>
    <template #footer>
         <div>footer</div> 
        </template>
  </child2>

  <h2>作用域插槽</h2>
  <child3>
  <template v-slot="{user: {name,age}}">
    <p>用户1姓名: {{ name }}</p>
    <p>用户1年龄: {{ age }}</p>
  </template>

  <template #person="{user: {name, age}}">
    <p>用户2姓名: {{ name }}</p>
    <p>用户2年龄: {{ age }}</p>
  </template>
  </child3>

    <!-- 动态插槽 -->
    <h2>动态插槽</h2>

    <child3>
        <template v-slot:[dynamicSlotName]="{user: { name, age }}">
        <p>用户姓名：{{ name }}</p>
        <p>用户年龄：{{ age }}</p>
  </template>
      </child3>
      <button @click="handleClick">动态插槽切换</button>
 

</template>

<script setup>
import { ref } from 'vue'
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
import child3 from './components/child3.vue'
defineOptions({
  name: 'chaocao'
})
const dynamicSlotName = ref('person')
const handleClick = () => {
    dynamicSlotName.value = dynamicSlotName.value == 'defaule' ? 'person' : 'default'
}
</script>

<style  lang="scss" scoped>
</style>